<template>
  <el-menu
    class="admin-el-menu"
    :default-active="activeMenu"
    background-color="#fff"
    text-color="#333"
    active-text-color="#1765d8"
    router
    :unique-opened="false"
  >
    <div class="logo-area">
      <img src="/src/assets/images/logo.png" alt="LOGO" class="logo-img" />
      <span class="logo-title">紫荆花管理系统</span>
    </div>
    <el-menu-item index="/" class="home-menu-item">
      <el-icon><HomeFilled /></el-icon>
      <span>网站首页</span>
      <span class="menu-arrow">→</span>
    </el-menu-item>
    <el-sub-menu index="content">
      <template #title>
        <el-icon><Document /></el-icon>
        <span>内容</span>
      </template>
      <el-menu-item index="/admin/content/publish">发布</el-menu-item>
      <el-menu-item index="/admin/content/list">管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="marketing">
      <template #title>
        <el-icon><PieChart /></el-icon>
        <span>营销</span>
      </template>
      <el-menu-item index="/admin/marketing/statistics">访问统计</el-menu-item>
      <el-menu-item index="/admin/marketing/customerservice">客服</el-menu-item>
      <el-menu-item index="/admin/marketing/seo">SEO</el-menu-item>
      <el-menu-item index="/admin/marketing/links">友情链接</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="appearance">
      <template #title>
        <el-icon><Monitor /></el-icon>
        <span>外观</span>
      </template>
      <el-menu-item index="/admin/appearance/pc">PC端主题</el-menu-item>
      <el-menu-item index="/admin/appearance/mobile">移动端主题</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="application">
      <template #title>
        <el-icon><Grid /></el-icon>
        <span>应用</span>
      </template>
      <el-menu-item index="/admin/application/myapps">我的应用</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="user">
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户</span>
      </template>
      <el-menu-item index="/admin/user/member">会员</el-menu-item>
      <el-menu-item index="/admin/user/admin">管理员</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="security">
      <template #title>
        <el-icon><Lock /></el-icon>
        <span>安全</span>
      </template>
      <el-menu-item index="/admin/security/efficiency">安全与效率</el-menu-item>
      <el-menu-item index="/admin/security/backup">备份与恢复</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="settings">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>设置</span>
      </template>
      <el-menu-item index="/admin/settings/base">基本信息</el-menu-item>
      <el-menu-item index="/admin/settings/mobile">手机版</el-menu-item>
      <el-menu-item index="/admin/settings/category">栏目</el-menu-item>
      <el-menu-item index="/admin/settings/language">语言</el-menu-item>
      <el-menu-item index="/admin/settings/thumbwatermark">缩略图/水印</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { HomeFilled, Document, PieChart, Monitor, Grid, User, Lock, Setting } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = route.path
</script>

<style scoped>
.admin-el-menu {
  width: 260px;
  min-height: 100vh;
  border-right: 1px solid #e4e7ed;
  background: #fff;
  box-shadow: 2px 0 8px 0 rgba(0,0,0,0.04);
  border-radius: 0 12px 12px 0;
  padding-top: 0;
}
.logo-area {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  margin-bottom: 8px;
}
.logo-img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 8px;
}
.logo-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  letter-spacing: 1px;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  border-radius: 6px;
  margin: 4px 8px;
  font-size: 16px;
  height: 48px;
  line-height: 48px;
  transition: background 0.2s, color 0.2s;
}
:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background: #f4f8fb !important;
  color: #1765d8 !important;
}
:deep(.el-menu-item.is-active) {
  background: #fff !important;
  color: #1765d8 !important;
}
:deep(.el-sub-menu__title) {
  font-weight: 600;
  font-size: 17px;
}
:deep(.el-menu--inline) {
  background: transparent !important;
}
:deep(.el-menu-item) {
  margin-left: 28px;
}
:deep(.el-sub-menu) {
  margin-bottom: 10px;
}
.home-menu-item {
  font-size: 18px !important;
  font-weight: bold !important;
  height: 54px !important;
  line-height: 54px !important;
  margin: 8px 8px 16px 8px !important;
  border-radius: 10px !important;
  color: #1765d8 !important;
  position: relative;
}
:deep(.home-menu-item.is-active) {
  background: #dbeafe !important;
  color: #0b3fae !important;
}
.menu-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #bdbdbd;
  transition: color 0.2s;
}
.home-menu-item:hover .menu-arrow {
  color: #1765d8;
}
/* 一级菜单与二级菜单区分 */
:deep(.el-sub-menu__title) {
  background: #f8fafc !important;
  margin-top: 6px;
  margin-bottom: 2px;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
:deep(.el-menu--inline .el-menu-item) {
  background: #fff !important;
  font-size: 15px !important;
  margin: 2px 0 2px 24px !important;
  border-radius: 6px !important;
}
:deep(.el-menu--inline .el-menu-item.is-active) {
  background: #fff !important;
  color: #1765d8 !important;
}
</style> 